<template>
  <div class="indexOne">
    <div class="indexOne-bg">
      <h2>

        <i class="iconfont icon-huo mini"></i>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo "></i> 新品速递·精品好物
        <i class="iconfont icon-huo "></i>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo mini"></i>

        <span class="more">
          <router-link class="more" :to="title.url">更多<van-icon name="arrow" /></router-link></span>
      </h2>
    </div>
    <!-- <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{  timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down> -->
    <div id="indexOne-scroll" class="indexOne-scroll">
      <div id="indexOne-begin" class="content">
        <div class="item" v-for="value in items" :key="value.F_ProductId">
          <div @click="
            $router.push({
              path: '/product',
              query: { id: value.F_ProductId, parents_id: username },
            })
          ">
            <img class="lazy-img" :src="'http://higuang365.com/' + value.F_pic_url" @load="loadimg($event)" />
            <div class="name">{{ value.F_Name }}</div>
            <div class="price">
              <div class="estimate">￥</div>
              <div class="saleprice">{{ value.F_BdPrice }}</div>
            </div>
            <div class="cart" @click.stop="addGoodsCart(value.F_yuliu3, value.F_ProductId)">
              加入购物车
            </div>
          </div>
        </div>
      </div>
      <div id="indexOne-end" class="content"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import { ScrollLeft } from "@/lib/expand";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import { defineComponent, nextTick } from "vue";
export default defineComponent({
  setup() {
    const date = new Date();
    date.setHours(23, 59, 59);
    const data = reactive({
      // time: date - new Date(),
      username: getCookie("S[MEMBER]"),
      items: [],
      title: { name: "新品来袭", url: "/monthly", tag_id: "38" },
    });
    //  tag: [
    //       { 'tag_name': '嗨11抢先购-首页秒杀', 'tag_id': 44 },
    //       { 'tag_name': '嗨11抢先购-首页', 'tag_id': 39 },
    //       { 'tag_name': '新品-首页', 'tag_id': 38 },
    //       { 'tag_name': '每月特促-首页', 'tag_id': 37 },
    //       { 'tag_name': '每日爆款-首页', 'tag_id': 36 },
    //       { 'tag_name': '每日爆款', 'tag_id': 23 },
    //       { 'tag_name': '嗨11抢先购', 'tag_id': 22 },
    //       { 'tag_name': '全民抢购', 'tag_id': 21 },
    //       { 'tag_name': '每月特促', 'tag_id': 19 },
    //       { 'tag_name': '新品', 'tag_id': 18 },
    //       { 'tag_name': '新品预售', 'tag_id': 16 }
    //   ]
    const onLoad = async () => {
      //  if(new Date().getDate()>=11){
      //     data.title={name:"嗨11抢先购",url:"/rushbuy/hieleven"};
      //     const res = await GoodsType({ pageNum:1,pageSize: 20,tag_id: 2w,strlv:getCookie("MLV")  });
      //     data.items = res[1];
      //     return ;
      //  }

      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 50,
        tag_id: data.title.tag_id,
        strlv: getCookie("MLV"),
      });

      if (!res[0]) {
        const res = await GetTagGoodsList({
          pageNum: 1,
          pageSize: 50,
          tag_id: data.title.tag_id,
          strlv: getCookie("MLV"),
        });
        data.items = res[1];
        return;
      }
      data.items = res[1];
      //Dom更新后触发滚动
      nextTick(() => {
        const listScroll = new ScrollLeft(
          "indexOne-scroll",
          "indexOne-begin",
          "indexOne-end"
        );
        listScroll.start(15);
      });
    };
    const loadimg = (event: any) => {
      // console.log(event);

      event.target.dataset.lazy = "loaded";
      // console.log('over',event);

    };

    onLoad();
    return { ...toRefs(data), loadimg, addGoodsCart };
  },
});
</script>
<style lang="scss" scoped>
.indexOne {
  font-size: 1rem;

  .indexOne-bg {

    // background: url(//img10.360buyimg.com/wq/jfs/t1/102062/10/16107/4994/5e786d97E8bd7cdab/6f298520ce0743b2.png)
    //   no-repeat;
    // background-size: contain;
    h2 {
      font-size: 1.8rem;
      padding: 0.5rem;
      margin: 0;
      border-bottom: 2px solid #f7f7f7;
      position: relative;
      text-align: center;
      margin-bottom: 1rem;

      i {
        color: red;
      }

      .icon-huo {
        font-size: 2rem;
      }

      .mini {
        font-size: 1.4rem;
      }

      .middle {
        font-size: 1.7rem;
      }

      .more {
        width: 4rem;
        font-size: 1rem;
        position: absolute;
        top: 0.5rem;
        right: -0.4rem;
        font-weight: 500;
        color: #f15e5e;
      }
    }
  }

  .title {
    padding: 0.5rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    position: relative;

    .new-icon {
      font-size: 1.2rem;
      transform: scale(2);
      margin-right: 0.5rem;
    }

    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }

    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #90797c;
      border-radius: 4px;
    }
  }

  // .slogan {
  //   text-align: left;
  //   font-size: 1.8rem;
  //   font-weight: bold;
  // }
  .indexOne-scroll {
    overflow: auto;
    white-space: nowrap;

    .content {
      display: inline-flex;
      overflow: auto;
      border-radius: 1rem;

      .item {
        margin: 0.5rem;
        width: 10rem;
        font-size: 1rem;
      }

      img {
        width: 100%;
        border-radius: 1rem;
        height: 10rem;
      }

      .name {
        height: 1.6rem;
        line-height: 1.6rem;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 1px;
      }

      .price {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
        color: #ff0036;
      }

      .saleprice {
        font-size: 1.7rem;
        font-weight: bold;
        position: relative;
        top: -4.5px;
      }

      .estimate {
        font-size: 1rem;
      }

      .cart {
        padding: 0.5rem;
        background: linear-gradient(90deg, #ff6940, #ff334a);
        color: #fff;
        border-radius: 2rem;
      }
    }

    .more {
      line-height: 2.4rem;
      font-size: 1rem;
      position: absolute;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
      letter-spacing: 0px;
    }
  }
}
</style>
